<template>
  <div class="detail">
    <tabControl v-if="showtabcontrol" class="tabs"
    :titles="['','','','']"
    ></tabControl>

    <van-nav-bar
    title="房屋详情"
    left-text="旅途"
    left-arrow
    @click-left="onClickLeft"
    />
    <div class="main" v-if="mainPart">
    <detailSwipe  :swipedata="mainPart.topModule.housePicture.housePics"></detailSwipe>
    <detailInfos></detailInfos>
    <detailFacility></detailFacility>
    <detailLandlord></detailLandlord>
    <detailComment></detailComment>
    <detailNotice></detailNotice>
    <detailMap></detailMap>
    <detailIntro></detailIntro>
    </div>
    <div class="footer">
      <img src="" alt="">
      <!-- <img src="@/assets/img/detail/icon_chat.png" alt=""> -->
      <div class="text">弘源旅途，永无止境</div>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import usedetailstore from '@/stores/modules/detail';
import { storeToRefs } from 'pinia';
import { computed } from 'vue';

import tabControl from '@/components/tab-control/tab-control.vue';
import detailSwipe from './cpns/detail-swipe.vue';
import detailInfos from './cpns/detail-infos.vue';

const detailstore=usedetailstore();
import detailFacility from './cpns/detail-facility.vue';
import detailLandlord from './cpns/detail-landlord.vue';
import detailComment from './cpns/detail-comment.vue';
import detailNotice from './cpns/detail-notice.vue';
import detailMap from './cpns/detail-map.vue';
import detailIntro from './cpns/detail-intro.vue';
const route=useRoute();
const router=useRouter();
const houseId=route.params.id;
detailstore.fetchDetailInfos(houseId);
// console.log(houseId);

const { houseinfos}=storeToRefs(detailstore);
// console.log(houseinfos.value);

const mainPart= computed(()=>houseinfos.value.mainPart);

//  console.log(mainPart.value);




const onClickLeft=()=>{
    router.go(-1);
}



</script>


<style lang="less" scoped>
.tabs {
  position: fixed;
  z-index: 9;
  left: 0;
  right: 0;
  top: 0;
}
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;

  img {
    width: 123px;
  }

  .text {
    margin-top: 12px;
    font-size: 12px;
    color: #7688a7;
  }
}
</style>